<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div><h1>1</h1></div>
    <h2>呢日弄</h2>
    <script>

        // 在一个标签内追加元素
        // $("div").append("<h1>h1</h1>")
        // $("div").append("<h1>h1</h1><h1>h1111</h1>")
        // $("div").append($("h1"))

        // 将标签追加到另一个标签内
        // $("<h1>h1</h1>").appendTo("div");

        // 在一个标签内的开始位置插入另一个标签
        // $("div").prepend("<h2>h222</h2>");

        // 将标签插入到另一个标签内的最前面
        // $("<h2>h222</h2>").prependTo("div");


        // 在一个标签之后追加元素
        // $("div").after("<h2>h222</h2>")
        // 在一个标签前面追加元素
        // $("div").before("<h2>h222</h2>")

        // 将一个元素放在另一个元素的后面
        $("div").insertAfter("h2")
        $("h1").insertBefore("h2")
    </script>
</body>
</html>